<template>
	<ul class="alphabet">
		<li class="alphabetItem" 
			v-for=" item of letters" 
			:key="item"
			:ref="item"
			@touchstart="handleTouchStart"
			@touchmove="handleTouchMove"
			@touchend="handleTouchEnd"
			@click="handleletterClick"
			
			>{{item}}</li>

	</ul>
</template>

<script>
export default{
	props:{
		cities:Object
	},
	data (){
		return{
			touchStatus:false
		}
	},
	updated (){
		this.startY=this.$refs['A'][0].offsetTop /*获取到第一个字母距离顶部的高度*/
	},
	methods:{
		handleletterClick (e){
			this.$emit('change',e.target.innerHTML)
		},
		handleTouchStart(){
			touchStatus:true
		},
		handleTouchMove(e){

				    const touchY = e.touches[0].clientY - 145
				    const index =Math.floor((touchY-this.startY)/20)
				    if(index >= 0 && index <this.letters.length) {
					this.$emit('change',this.letters[index])
			      }

		},
		handleTouchEnd (){
			touchStatus:false
		}
	},
	computed:{
		letters (){
		const letters=[]
		for(let i in this.cities){
			letters.push(i)
		}
		return letters
	 }
  }

	
}
</script>

<style lang="stylus" scoped>
.alphabet
 display:flex
 flex-direction:column
 justify-content:center
 width:.4rem

 position:absolute
 top:2rem
 right:0
 bottom:0
.alphabetItem
 padding:.1rem 0
 text-align:center
</style>